<script setup lang="ts">
import { h, inject, onMounted, reactive, ref, Ref, toRefs } from 'vue'
import { useStore } from '../store'
import { useRouter } from 'vue-router'
import { availableLangCodes, availableLangNames, translateWithLocale } from '../i18n'
import { dialogComponent } from '../types/dialog/dialog'
import { useDialog } from '../utils/template-dialog'
import MySelect from '../components/MySelect.vue'
import { Search } from '@element-plus/icons-vue'

const state = reactive({
  circleUrl:
    'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
  squareUrl:
    'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
})

const { circleUrl } = toRefs(state)
const transitionShow = ref(false)
const store = useStore()

const router = useRouter()
const hScale = inject<Ref<number>>('hScale')
const vScale = inject<Ref<number>>('vScale')
const lang = ref(0)
const inputRoom =ref("")
const inputPassword = ref("")
const entryRoom=()=>{
  console.log("加入房间")
}
const newRoom=()=>{
  console.log("新建房间")
}
const quitRoom=()=>{
  console.log("退出房间")
}
const volume=ref(0)
const mircophoneVolume=ref(0)
const changeVolume=()=>{
  //书写改变音量的逻辑
}
const changeMircophoneVolume=()=>{
  //书写改变麦克风的逻辑
}
onMounted(async () => {
  if (!localStorage.lang) {
    localStorage.lang = 'en_US'
    lang.value = 0
    useDialog(
      dialogComponent(store.settings.appearance.dialogStyle),
      {
        onOk(dispose: () => void) {
          if (lang.value !== 0) {
            localStorage.lang = availableLangCodes[lang.value]
            router.go(0)
          }
          dispose()
        },
        onCancel(dispose: () => void) {
          lang.value = 0
          dispose()
        },
      },
      {
        title: () =>
          translateWithLocale(
            'general_welcomeTitle',
            availableLangCodes[lang.value],
          ),
        msg: () =>
          translateWithLocale(
            'general_langText',
            availableLangCodes[lang.value],
          ),
        vnode: () =>
          h(
            'div',
            {
              style: {
                display: 'flex',
                'flex-direction': 'row',
                width: '100%',
              },
            },
            h(MySelect, {
              selectorStyle: {
                'border-width': '1px',
                'border-color': '#CEA652',
                'border-radius': '9999px',
                'margin-top': '0.5rem',
                padding: '0.25rem 0.5rem',
                transition: 'all 0.2s',
                color: '#886a32',
                'background-color': '#ECE5D8',
              },
              items: availableLangNames,
              modelValue: lang.value,
              middle: true,
              onChange: (idx: number) => {
                lang.value = idx
              },
            }),
          ),
        hScale: hScale,
        vScale: vScale,
      },
    )
  }

  setTimeout(() => {
    transitionShow.value = true
  }, 50)
})
</script>

<template>
  <div class="content-wrapper" :class="{ from: !transitionShow }">
    <div class="common-layout">
      <el-container>
          <el-aside width="400px" style="position: relative;">  
            <span>用户列表</span>
            <!--元素就会自动换行了。同时，使用了 v-for 指令来遍历 users 数组中的用户信息，为每个用户显示一个头像。-->
            <el-col :span="12">
              <div class="demo-basic--circle" style="display: flex; flex-wrap: wrap;">
                <div class="block" v-for="user in users" :key="user.id">
                  <el-avatar :size="50" :src="user.avatar"></el-avatar>
                </div>
              </div>
            </el-col>

            <div id="voiceControls" style="position: absolute; bottom: 0; width: 100%;" >  
            <div id="voiceContainer" >
              <div id="sliderContainer" >
                  <span>音量</span>
                <el-slider style="max-width: 300px" v-model="volume" @change="changeVolume"/>
              </div>
              <div id="sliderContainer" >
                <span>麦克风</span>
                <el-slider style="max-width: 300px" v-model="mircophoneVolume" @change="changeMircophoneVolume"/>
              </div>
             </div>
            </div>
          </el-aside>

          <el-main>
            <div id="roomContainer">
                

              <div class="button-container">  
                <div>
                  <el-button size="large" type="primary" @click="entryRoom">加入</el-button><br>
                </div>
                <div>
                  <el-button size="large" type="success" @click="newRoom">新建</el-button><br>
                </div>
                <div>
                  <el-button size="large" type="danger" @click="quitRoom">退出</el-button><br>
                </div>
              </div>

              <el-input
                  v-model="inputRoom"
                  style="width: 240px"
                  size="large"
                  placeholder="RoomNo"
                  :suffix-icon="Search"
                />
                <br>
                <el-input
                  v-model="inputPassword"
                  style="width: 240px"
                  size="large"
                  placeholder="Room Password"
                  :suffix-icon="Search"
                />
                <br>
            </div> 
          </el-main>

          <el-foot>
          </el-foot>
      </el-container>
    </div>
  </div>
</template>

<style scoped lang="scss">
.content-wrapper {
  transition-duration: 400ms;

  &.from {
    @apply opacity-0 blur-lg scale-90;
  }
}

//.bg-pic {
//  @apply object-cover;
//  width: 98vw;
//  height: calc(100vh - 56px);
//  border-radius: 24px 24px 0 0;
//  -webkit-mask: linear-gradient(white 30%, rgb(255 255 255 / 0.1));
//}

.title-text {
  @apply text-5xl;
}

.block{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

//.bottom-area {
//  @apply absolute bottom-0 w-full justify-center;
//  height: 140px;
//}

//.game-button {
//  @apply p-3 mx-2 my-2 rounded-lg;
//  @apply font-bold text-xl bg-yellow-400 cursor-default;
//  @apply hover:bg-yellow-500 active:bg-yellow-800 active:scale-90 transition-all;
//
//  .dark & {
//    @apply bg-yellow-700 hover:bg-yellow-600 active:bg-yellow-500;
//  }
//}

.icon-button {
  @apply fixed bottom-4 w-10 h-10;
  @apply rounded-full bg-white;
  @apply hover:bg-gray-100 active:bg-gray-400 active:scale-90 transition-all;

  .dark & {
    @apply border border-gray-600;
    @apply bg-gray-800 hover:bg-gray-600 active:bg-gray-500;
  }
  .scroll-wrapper {
    @apply absolute z-40 top-0 left-[1vw];
  }

  .scroll-content-wrapper {
    @apply text-left px-10 pb-5 w-[95%];
  }
}
.el-row {
  display:flex;
  flex-wrap: wrap;
  align-items: center;
}
.el-row  .el-card {
  min-width: 100%;
  height: 100%;
  margin-right: 20px;
  transition: all .5s;
}
.el-form-item {
  margin-bottom: 0 !important;
}
.pagination-container {
  margin-top: -3px;
  margin-bottom: 30px;
}
.box-card {
  .header {
    position: relative;
    .label{
      padding: 0 3px;
      background-color: #fdf0da;
      color: #f19901;
    }
    .header-label {
      padding-left: 10px;
    }
    .card-header-tag-blue {
      position: absolute;
      width: 68px;
      height: 30px;
      top: -14px;
      right: -15px;
      display: inline-block;
    }
    .card-header-tag-green {
      position: absolute;
      width: 68px;
      height: 30px;
      top: -14px;
      right: -15px;
      display: inline-block;
    }
  }
  .footer {
    font-size: 18px !important;
    background-color: rgb(245, 247, 251);
    display: flex;
    height: 50px;
    justify-content: space-evenly;
  }
  .card-label {
    color: rgb(197, 197, 197);
    margin-right: 8px;
    width: 70px;
    display: inline-block;
    margin-bottom: 5px;
  }
}
.button-container div {
  margin-bottom: 20px; /* 设置按钮之间的垂直间距 */
}

</style>
